<template>
	<view class="communityImg">
		<!-- 左侧导航区 -->
		<scroll-view class="left" scroll-y="true">
			<view :class="{active:activeIndex === index}" 
			v-for="(item,index) in imgNav" 
			:key="item.id" 
			:id="item.id"
			@click="getImages(item.id,index)"
			>{{item.title}}
			</view>
		</scroll-view>
		<view v-if="currentShowImg.length ===0" class="noData">暂无数据</view>
		<!-- 右侧展示区 -->
		<scroll-view class="right" scroll-y="true">
			<view v-for="(item) in currentShowImg" :key="item.id" @click="previewImg(item.img_url)">
				<image src="item.img_url"></image>
				<view>{{item.title}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'communityImg',
		data() {
			return {
				// 存储图片导航栏数据
				imgNav: [],
				// 当前展示的图片
				currentShowImg:[],
				// 高亮索引
				activeIndex:0,
				// 当前展示图片的url，用于图片预览
				currentPreviewPath:[]
			}
		},
		onLoad() {
			this.getImgCategoey()
		},
		methods: {
			async getImgCategoey() {
				const res = await this.$myRequest({
					url: '/api/getimgcategory'
				})
				this.imgNav = res.data.message
				// 获取默认选中的照片
				this.getImages(this.imgNav[0].id,this.activeIndex)
			},
			async getImages(id,index){
				this.activeIndex = index
				const res = await this.$myRequest({
					url:`/api/getimages/${id}`,
				})
				console.log(res.data.message)
				this.currentShowImg = res.data.message
				// 下面代码用于图片预览
				// 清空
				// this.currentPreviewPath = []
				// push图片路径
				// res.data.message.forEach(it=>{
				// 	this.currentPreviewPath.push(it.img_url)
				// })
			},
			previewImg(url){
				// 这样写，预览图片代码更简单
				const urls = this.currentShowImg.map(it=>{
					return it.img_url
				})
				uni.previewImage({
					// urls:this.currentPreviewPath,
					urls,
					current:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.communityImg {
		display: flex;
		position: relative;
		.noData{
			position: absolute;
			left: 220rpx;
			top: 20rpx;
			color: #333;
			font-size: 30rpx;
		}
		.left {
			width: 200rpx;
			// 高度设置 100vh 是为了出现左侧滚动区域的滚动条
			height: 100vh;
			border-top: 1rpx solid rgba(0, 0, 0, .1);
			border-right: 1rpx solid rgba(0, 0, 0, .1);
			view {
				width: 100%;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				box-sizing: border-box;
				color: #333;
				font-size: 28rpx;
			}
			.active {
				background-color: #b50e03;
				color: #fff;
			}
		}
		.right{
			width: 550rpx;
			height: 100vh;
			padding: 15rpx 24rpx;
			box-sizing: border-box;
			text-align: center;
			font-size: 28rpx;
			color: #999;
			image{
				width: 100%;
				height: 500rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>
